<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>左右滚动菜单特效</title>
    <style>
      .outBox {
        width: 100%;
        position: relative;
        margin-top: 12px;
      }
      #menu-container {
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        width: 100%; /* 容器宽度 */
      }
      #menu {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0; /* 消除内联元素之间的空白 */
      }
      .menu-item {
        display: inline-block;
        padding: 10px 20px;
        background-color: #f2f2f2;
        border: 1px solid #ddd;
        margin-right: 10px;
        font-size: 16px; /* 设置字体大小 */
        text-align: center;
      }
      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-70%);
        background-color: rgba(255, 255, 255, 0.5);
        border: none;
        padding: 10px;
        cursor: pointer;
        z-index: 1;
      }
      .left-arrow {
        left: 0;
        display: none;
      }
      .right-arrow {
        right: 0;
        display: none;
      }
    </style>
  </head>
  <body>
    <button id="addButton">添加元素</button>
    <button id="delButton">删除元素</button>
    <div class="outBox">
      <button class="arrow left-arrow" id="scrollLeft">&#10094;</button>
      <div id="menu-container">
        <ul id="menu">
          <li class="menu-item">菜单项 1</li>
          <li class="menu-item">菜单项 2</li>
          <li class="menu-item">菜单项 3</li>
          <li class="menu-item">菜单项 4</li>
          <li class="menu-item">菜单项 5</li>
          <!-- 更多菜单项 -->
        </ul>
      </div>
      <button class="arrow right-arrow" id="scrollRight">&#10095;</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function () {
        function scrollMenu(direction) {
          var $menu = $("#menu-container");
          var scrollLeftVal = $menu.scrollLeft();
          var scrollWidth = $menu[0].scrollWidth;
          var containerWidth = $menu.width();
          var scrollAmount = 150; // 每次滚动的像素量
          var maxScroll = scrollWidth - containerWidth;

          if (direction === "left") {
            if (scrollLeftVal > 0) {
              $menu.animate(
                {
                  scrollLeft: scrollLeftVal - scrollAmount,
                },
                300
              );
            }
          } else if (direction === "right") {
            if (scrollLeftVal < maxScroll) {
              $menu.animate(
                {
                  scrollLeft: scrollLeftVal + scrollAmount,
                },
                300
              );
            }
          }
        }

        $("#scrollLeft").on("click", function () {
          scrollMenu("left");
        });

        $("#scrollRight").on("click", function () {
          scrollMenu("right");
        });
        $menu = $("#menu-container");
        function debounce(func, wait) {
          let timeout;
          return function () {
            let context = this; // this
            let args = arguments; // event
            clearTimeout(timeout);
            timeout = setTimeout(function () {
              func.apply(context, args);
            }, wait);
          };
        }
        function kkx() {
          console.log(123);
          const scrollLeft = this.scrollLeft; // 当前滚动的距离（顶部）
          const scrollBottom = this.scrollWidth - this.clientWidth - scrollLeft; // 滚动到底部的距离
          console.log("Scrolled to:", scrollLeft);
          // 示例：当滚动到底部时加载更多内容
          if (scrollBottom <= 0) {
            $(".right-arrow").css("display", "none");
          } else {
            $(".right-arrow").css("display", "block");
          }
          if (scrollLeft <= 0) {
            $(".left-arrow").css("display", "none");
          } else {
            $(".left-arrow").css("display", "block");
          }
        }
        const kkxth = debounce(kkx, 500);
        $menu.on("scroll", kkxth);
        const resizedouce = debounce(function () {
          kkxth.call(document.querySelector("#menu-container"));
          // ... 执行其他操作 ...
        }, 500);
        $(window).resize(resizedouce);
        // $menu.on("scroll", function (event) {
        //   setTimeout(() => {
        //     const scrollLeft = this.scrollLeft; // 当前滚动的距离（顶部）
        //     const scrollBottom =
        //       this.scrollWidth - this.clientWidth - scrollLeft; // 滚动到底部的距离

        //     console.log("Scrolled to:", scrollLeft);

        //     // 示例：当滚动到底部时加载更多内容
        //     if (scrollBottom <= 0) {
        //       $(".right-arrow").css("display", "none");
        //     } else {
        //       $(".right-arrow").css("display", "block");
        //     }
        //     if (scrollLeft > 0) {
        //       $(".left-arrow").css("display", "block");
        //     } else {
        //       $(".left-arrow").css("display", "none");
        //     }
        //   }, 605);
        // });
        // 滚动时执行的逻辑
        const addButton = $("#addButton");
        const myList = $("#menu");
        addButton.on("click", () => {
          const newLi = $("<li></li>");
          newLi.attr("class", "menu-item");
          newLi.text(`菜单项 ${myList.children("li").length + 1}`);
          myList.append(newLi);
          if ($menu[0].scrollWidth - $menu[0].clientWidth > 0) {
            $menu.animate(
              {
                scrollLeft: $menu[0].scrollWidth - $menu[0].clientWidth,
              },
              300
            );
          }
        });
        const delButton = $("#delButton");
        delButton.on("click", () => {
          // const newLi = $("<li></li>");
          // newLi.attr("class", "menu-item");
          // newLi.text(`菜单项 ${myList.children("li").length + 1}`);
          // myList.append(newLi);
          $("#menu li:last").remove();
          console.log($menu[0].scrollWidth - $menu[0].clientWidth);
          kkxth.call(document.querySelector("#menu-container"));
          // if ($menu[0].scrollWidth - $menu[0].clientWidth <= 0) {
          //   $menu.animate(
          //     {
          //       scrollLeft: 0,
          //     },
          //     300
          //   );
          // }
        });
      });
      // const jian =function () {
      //   console.log("123", this.a);
      // };
      const jian = () => {
        console.log("123", this.a);
      };
      const obj = {
        a: 56569,
      };
      a = 123366;
      jian.call(obj);
      // 1.路由缓存,减少路由页面重新加载时耗费内存 keepalive
      // 2.函数缓存,使用计算属性缓存一些复杂逻辑下的变量
      // 3.gzip压缩,压缩文件,nginx配置解压gzip on,浏览器直接读取压缩文件(压缩文件比较小)减少性能浪费
      // 原理是客户端浏览器快速解压的原理，可以大大减少了网站的流量
      // 4.长列表使用虚拟滚动实现,具体是控制展示的高度,只渲染用户看到的一部分数据(通过监听盒子的滚动高度和窗口高度以及滚动距离来控制)
      // 5.vuex尽量不要滥用,只有多个页面同时使用的数据才会用
      // 6.下载依赖时按需下载,比如monent和day.js,尽量使用day.js,小而清
      // echart资源依赖,如果不是内网环境,可以使用cdn环境的静态资源,避免依赖过大
      // ui组件按需引入使用
    </script>
  </body>
</html>
